<template>
	<div class="container w-full">
		<div class="carousel">
			<el-carousel type="card" height="auto" arrow="never" :autoplay="true" :interval="2000"  @change="changeCarousel">
				<el-carousel-item v-for="(item, index) in HomeDataList" :key="index">
					<div class="image">
						<img :src="HomeDataList[index + 0]?.carouselImg" class="bgc0" />
						<img :src="HomeDataList[index < HomeDataList.length - 1 ? index + 1 : index - (HomeDataList.length - 1)]?.carouselImg" class="bgc1" />
						<img :src="HomeDataList[index < HomeDataList.length - 2 ? index + 2 : index - (HomeDataList.length - 2)]?.carouselImg" class="bgc2" />
					</div>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</template>

<script setup>
import { onMounted } from 'vue';
import bg1 from '/@/assets/login/bg1.jpg';
import bg2 from '/@/assets/login/bg2.jpg';
import bg3 from '/@/assets/login/bg3.jpg';
import bg4 from '/@/assets/login/bg4.jpg';
import bg5 from '/@/assets/login/bg5.jpg';
import bg6 from '/@/assets/login/bg6.jpg';

const HomeDataList = [
	{
		carouselImg: bg1,
	},
	{
		carouselImg: bg6,
	},
	{
		carouselImg: bg2,
	},
	{
		carouselImg: bg3,
	},
	{
		carouselImg: bg5,
	},
	{
		carouselImg: bg4,
	},
];
const emit = defineEmits(['changeBackgroundColor']); // 定义可触发的事件

function changeCarousel(v) {
	emit('changeBackgroundColor', v); // 触发事件并传递消息
}

onMounted(() => {
	console.log(HomeDataList);
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
/* 版心：宽度固定并且水平居中的盒子 */
.container {
	//position: relative;
	// background-color: #0f0667;
  display: flex;
  align-items:center;
	margin: 0 auto;
}

/** 修复切换路由白屏一瞬 */
:deep(.el-image__placeholder) {
	background: none;
}

:deep(.el-carousel__item--card) {
	width: 100%;
	height: 800px;
}

:deep(.el-carousel__item) {
	left: -250px;
	// opacity: 0.5;
}

:deep(.el-carousel__mask) {
	display: none;
}

// 切换轮播图
:deep(.el-carousel__button) {
	width: 40px;
}

:deep(.el-carousel__indicator.is-active button) {
	height: 8px;
}

/*:deep(.el-carousel__indicators--horizontal) {
	left: 30%;
}*/
</style>

<style scoped lang="scss">
.carousel {
	//position: absolute;
	//left: -200px;
	//top: 71px;
  display: flex;
  align-items: center;
	transform-style: preserve-3d;
	perspective: 400px; /* 设置透视效果 */
	width: 100%;
	height: 600px;

	img {
		width: 100%;
		height: 100%;
		// transform-style: preserve-3d;
		//  transform: rotateY(10deg);
		background-size: cover; /* 让图片铺满整个盒子 */
	}

	.el-carousel__item {
		perspective: 500px;
		transform-style: preserve-3d;
	}

	.image {
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transform: rotateY(8deg) /* Y轴旋转 10 度 */ translateZ(-145px) /* 恢复 Z 轴位置 */ scale(1); /* 恢复原始大小 */
	}

	.bgc0 {
		transform-style: preserve-3d;
		transform: translate3d(110px, 0, 0);
	}

	.bgc1 {
		height: 100%;
		opacity: 0.6;
		transform: translate3d(45px, -806px, -46px);
		transform-style: preserve-3d;
	}

	.bgc2 {
		height: 100%;
		opacity: 0.3;
		transform: translate3d(-90px, -1624px, -174px);
		transform-style: preserve-3d;
	}

	.el-carousel__item:nth-child(2n) {
		opacity: 0;
		transition: all 0.3s ease-in-out;
	}

	.el-carousel__item:nth-child(2n + 1) {
		opacity: 0;
		transition: all 0.3s ease-in-out;
		transform: rotateY(8deg);
	}

	:deep(.is-active) {
		opacity: 1 !important;
	}
  :deep(.el-carousel__container){
    width: 100%;
  }
  :deep(.el-carousel) {
    width: 100%;
  }
  :deep(.el-carousel__indicators){
    transform: rotate(-6deg);
  }
}
</style>
